import * as React from 'react'
import { Toast } from 'antd-mobile'
import { NavBar, Input, Button } from 'components'
import { verify } from 'muka'
import './EditPsw.less'
import { post } from '../../../utils'

export default class EditPhoneNumber extends React.Component<any, any> {
    public state = {
        phone: '',
        isPhone: false,
        getVerificationText: '获取验证码',
        verificationWaiting: false,
        isGetVerification: false,
        verifyValue: ''
    }
    private allTime = 60
    private verifyMsg = ''

    public render(): JSX.Element {
        const { phone, isPhone, getVerificationText, verifyValue } = this.state
        return (
            <div className="editPhoneNumber">
                <NavBar fixed={true} title={<div style={{ fontSize: '0.97rem', color: '#222' }}>绑定手机号码</div>} />
                <div className="editPhoneNumber_inptuWrap">
                    <Input
                        className={`editPhoneNumber_inptuWrap_item ${(!isPhone && phone.length === 11) ? 'editPhoneNumber_notPhone' : ''}`}
                        type="tel"
                        onChange={this.handleInputChange}
                        onClose={() => {this.handleClear('phone')}}
                        placeholder="请输入11位手机号码"
                        value={phone}
                        maxLength={11}
                    />
                    <div className="editPhoneNumber_inptuWrap_verifyWrap">
                        <Input className="editPhoneNumber_inptuWrap_verify" value={verifyValue} maxLength={4} onClose={() => {this.handleClear('verifyValue')}} onChange={(e: any) => { this.setState({ verifyValue: e.target.value }) }} type="text" placeholder="请输入短信验证码" />
                        <Button className="editPhoneNumber_inptuWrap_verifyBtn" disabled={!isPhone} onClick={this.getVerification}>{getVerificationText}</Button>
                    </div>
                </div>
                <div className="editPhoneNumber_operation">
                    <Button className="editPhoneNumber_operation_btn" disabled={!(verifyValue.length === 4) ? true : !isPhone ? true : false} onClick={this.handleInputSubmit}>提交</Button>
                </div>
            </div>
        )
    }
    private getVerification = () => {
        const { verificationWaiting, phone } = this.state
        let verificationTimer: any
        if (verificationWaiting) {
            return
        }
        post('usersapi/sendSms', { phone }).then((data: any) => {
            this.verifyMsg = `${data}`
            this.setState({
                verificationWaiting: true,
                verificatonBtn: 'mobileLogin_verification_btn',
                getVerificationText: '重新发送' + this.allTime + 'S',
                isGetVerification: true,
            })
            const handleCountDown = () => {
                this.allTime--
                if (this.allTime === 0) {
                    this.setState({
                        getVerificationText: '重新发送',
                        verificatonBtn: 'mobileLogin_verification_btn mobileLogin_verification_btn_active',
                        verificationWaiting: false
                    })
                    clearInterval(verificationTimer)
                    this.allTime = 60
                } else {
                    this.setState({
                        verificatonBtn: 'mobileLogin_verification_btn',
                        getVerificationText: '重新发送' + this.allTime + 'S',
                    })
                }

            }
            verificationTimer = setInterval(handleCountDown, 1000)
        })
    }
    private handleClear = (key: string) => {
        this.setState({
            [key]: ''
        })
    }
    private handleInputChange = (e: any) => {
        const val = e.target.value
        if (verify.isMobile(val)) {
            this.setState({
                isPhone: true
            })
        } else {
            this.setState({
                isPhone: false
            })
        }
        this.setState({

            phone: e.target.value
        })
    }
    private handleInputSubmit = () => {
        const { verifyValue } = this.state
        const { userInfo } = this.props
        if (this.verifyMsg !== verifyValue) {
            Toast.info('验证码不正确')
            return
        }
        Toast.loading('')
        post('usersapi/userPhoneBind', {
            userId: userInfo.id,
            phone: this.state.phone
        }).then((data: any) => {
            Toast.success('手机号码绑定成功！', 2, this.handleSetUserInfo)
    
        })
    }
    private handleSetUserInfo = () => {
        const { SET_USER_INFO } = this.props
        SET_USER_INFO({})
        Toast.hide()
        this.props.history.goBack('/loginMode/login')
    }
}